import React, { Component } from 'react';
import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
import NewGoods from './News'
import Recommend from './Recommend/recommend'
import HuaWei from './Huawei/index-huawei';
import Glory from './Glory/index-glory';


function renderTabBar(props) {
  return (<Sticky>
    {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
  </Sticky>);
}

const tabs = [
    { title: <Badge >推荐</Badge> },
    { title: <Badge >华为</Badge> },
    { title: <Badge >荣耀</Badge> },
    { title: <Badge >新品</Badge> },
  ];
  
  // 回到顶部
  function goTop(){
    window.scrollTo(0, 0);
  }

  const TabExample = () => (
    <div>
      <WhiteSpace />
      <StickyContainer>
      <Tabs tabs={tabs}
        initialPage={0}
        renderTabBar={renderTabBar}
        swipeable={false}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', backgroundColor: '#fff'}} id="top">
          <Recommend/>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', backgroundColor: '#eaeaea' }} id="top">
          <HuaWei/>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', backgroundColor: '#eaeaea' }} id="top">
          <Glory/>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', backgroundColor: '#fff' }} id="top">
            <NewGoods/>
        </div>
      </Tabs>


      {/* 返回顶部*/}
      <div className="goTop" style={{position:'absolute',bottom:'0.5rem',right:'0.5rem',width:'3rem',height:'3rem'}} onClick={goTop.bind(this)}>
      <a href="#top">
      <img src="https://res.vmallres.com/nwap/20190228/images/echannelWap/icon/button-top.png" style={{width:'100%',height:'100%'}}/>
      </a>
        
      </div>
      {/* 返回顶部结束 */}
      </StickyContainer>
    <WhiteSpace />
    </div>
    
  );
  




export default TabExample;